<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8"/>
	<title>添加图书</title>
	<!-- 引用WarJar中的静态资源-->
	<link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"/>
	<script type="text/javascript" th:src="@{/webjars/jquery/jquery.js}"></script>
	<script type="text/javascript" th:src="@{/webjars/popper.js/umd/popper.min.js}"></script>
	<script type="text/javascript" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
	<script th:src="@{/webjars/bs-custom-file-input/dist/bs-custom-file-input.js}"></script>
	<script>
		$(document).ready(function () {
			bsCustomFileInput.init()
		});
	</script>
</head>
<body>
<div class="container">
	<h4>添加图书</h4>
	<form method="post" th:action="@{/addBook}" enctype="multipart/form-data">
		<div class="form-group row">
			<label for="name" class="col-sm-2 col-form-label">图书名：</label>
			<div class="col-sm-7">
				<input type="text" id="name" name="name"
					   class="form-control" placeholder="请输入图书名">
			</div>
			<div class="col-sm-3 text-danger">
				<span th:if="${book != null}" th:errors="${book.name}">错误提示</span>
			</div>
		</div>
		<div class="form-group row">
			<label for="cover" class="col-sm-2 col-form-label">图书封面：</label>
			<div class="col-sm-7">
				<div class="custom-file">
					<input type="file" id="cover" name="cover"
						   class="custom-file-input">
					<label class="custom-file-label" for="cover">选择文件</label>
				</div>
			</div>
			<div class="col-sm-3 text-danger">
				<span th:if="${book != null}" th:errors="${book.cover}">错误提示</span>
			</div>
		</div>
		<div class="form-group row">
			<div class="col-sm-6 text-right">
				<button type="submit" class="btn btn-primary">添加</button>
			</div>
			<div class="col-sm-6">
				<button type="reset" class="btn btn-danger">重设</button>
			</div>
		</div>
	</form>
</div>
</body>
</html>